<template>
  <div class="photo-album">
    <div class="photo-album-banner">
      <nut-swiper
        direction="horizontal"
        :swiperData="dataImgItem"
        :lazyLoad="true"
        :paginationVisible="true"
        ref="demo5"
      >
        <div v-for="(item,index) in dataImgItem" :key="index" class="nut-swiper-slide">
          <img
            :data-src="item.imgSrc"
            style="max-width:100%; max-height:100%"
            class="nut-img-lazyload"
          />
        </div>
      </nut-swiper>
    </div>
    <div class="album-info">
      <div class="album-header">
        <div class="album-money">
          <span>
            <i class="iconfont makerqian"></i>
            261.00
          </span>
          <span class="album-old-money">
            <i class="iconfont makerqian"></i>
            280.00
          </span>
        </div>
        <div class="album-title">影楼级高端相册</div>
        <div class="album-sub">高级相片纸，还原色彩，防水耐磨耐撕，不易变形永不褪色</div>
      </div>
      <div class="album-select">
        <span>已选</span>
        <span>
          多场景通用模版，1件
          <i class="iconfont makerarrow-right" @click="selectAlbum"></i>
        </span>
      </div>
      <div class="album-detail">
        <div class="album-detail-title">商品详情</div>
        <div class="album-foot">
          <img src alt />
          <div>
            <span>棉花in</span>
            <span>每张照片 都有温度</span>
          </div>
        </div>
      </div>
    </div>
    <div class="add-btn">
      <nut-button block shape="circle" @click="goTO">立即定制</nut-button>
    </div>
    <div v-for="(item, index) in detailList" :key="index" class="show-more-detai">
      <img :src="item" alt="">
    </div>
    <nut-actionsheet :is-visible="isVisible">
      <div slot="custom" class="custom-wrap">
        <span class="close-btn" @click="closeCustom">
          <i class="iconfont makerguanbi"></i>
        </span>
        <pruduct-select />
        <!-- <address-select @cancelAddr="handleCancelAddr" @ensureAdd="handleEnsureAdd" /> -->
      </div>
    </nut-actionsheet>
  </div>
</template>

<script>
import PruductSelect from './components/PruductSelect'

export default {
  name: 'PhotoAlbum',
  components: {
    PruductSelect
  },
  data() {
    return {
      isVisible: false,
      dataItem: [],
      dataImgItem: [],
      detailList: [
        '//m.360buyimg.com/mobilecms/s843x843_jfs/t19441/80/1577112624/568821/1ee9b683/5ad064f1Nf41a94b4.jpg',
        '//m.360buyimg.com/mobilecms/s843x843_jfs/t16798/338/1617130854/542623/4c197f4d/5ad064f1Nce5f69e2.jpg',
        '//m.360buyimg.com/mobilecms/s843x843_jfs/t19441/80/1577112624/568821/1ee9b683/5ad064f1Nf41a94b4.jpg',
      ],
    };
  },
  mounted() {
    setTimeout(() => {
      this.dataItem = [
        {
          name: 1,
        },
        {
          name: 2,
        },
        {
          name: 3,
        },
        {
          name: 4,
        },
      ];

      this.dataImgItem = [
        {
          imgSrc:
            '//m.360buyimg.com/mobilecms/s843x843_jfs/t19441/80/1577112624/568821/1ee9b683/5ad064f1Nf41a94b4.jpg',
        },
        {
          imgSrc:
            '//m.360buyimg.com/mobilecms/s843x843_jfs/t16798/338/1617130854/542623/4c197f4d/5ad064f1Nce5f69e2.jpg',
        },
        {
          imgSrc:
            '//m.360buyimg.com/mobilecms/s843x843_jfs/t22123/348/720079801/233727/23c4c0a4/5b162d64Nc5883413.jpg',
        },
        {
          imgSrc:
            '//m.360buyimg.com/mobilecms/s843x843_jfs/t1/27233/9/354/82863/5c090a0eEe2a350d8/aaa6686ce133e364.jpg',
        },
      ];
    }, 300);
  },
  methods: {
    goTO() {
      console.log(this.$route)
    },
    // handleSave() {},
    selectAlbum() {
      this.isVisible = !this.isVisible;
    },
    // 关闭对话框
    closeCustom() {
      this.isVisible = false
    }
  },
};
</script>

<style scoped lang="scss">
.photo-album {
  width: 100vw;
  height: 100vh;
  // overflow: auto;
  // position: relative;
  .photo-album-banner {
    width: 100vw;
    height: 100vw;
    .nut-swiper {
      position: relative;
      overflow: hidden;
      height: 100%;
      /* width: 100%; */
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .album-info {
    width: 100%;
    margin-bottom: 20px;
    // height: 40vh;
    // background: pink;
    .album-header {
      width: 100%;
      background-color: #ffffff;
      padding-bottom: 10px;
      margin-bottom: 5px;
      .album-money {
        height: 7vh;
        padding: 0 20px;
        line-height: 7vh;
        & > span:first-child {
          color: #fd5e4b;
          font-size: 22px;
          font-weight: bolder;
          margin-right: 10px;
          i {
            font-size: 16px;
          }
        }
        .album-old-money {
          font-size: 14px;
          color: #a9a6a6;
          i {
            font-size: 14px;
          }
          position: relative;
          &::after {
            position: absolute;
            left: 3%;
            width: 94%;
            height: 0.5px;
            top: 1vh;
            // bottom: 0px;
            content: '';
            background-color: #ccc;
            // box-shadow: 2px 2px 5px #000;
          }
        }
      }
      .album-title {
        padding: 0 20px;
        height: 4vh;
        line-height: 4vh;
        color: #1e1e1e;
        font-size: 18px;
      }
      .album-sub {
        padding: 0 20px;
        font-size: 12px;
        color: #a4a4a4;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
    .album-select {
      height: 8vh;
      padding: 0 20px;
      display: flex;
      background-color: #ffffff;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      margin-bottom: 10px;
      & > span:first-child {
        font-size: 16px;
        color: #1e1e1e;
        width: 60px;
      }
      & > span:last-child {
        flex: 1;
        color: #b3b3b3;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        text-align: right;
        position: relative;
        padding-right: 20px;
        i {
          position: absolute;
          right: 0;
          width: 20px;
          height: 100%;
          // line-height: 3.1vh;
          background-color: #ffffff;
        }
      }
    }
    .album-detail {
      // display: flex;
      background-color: #ffffff;
      .album-detail-title {
        // width: 100%;
        padding: 0 20px;
        height: 4vh;
        line-height: 4vh;
        font-size: 12px;
        color: #1e1e1e;
      }
      .album-foot {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 10px 20px 20px;
        img {
          width: 50px;
          height: 50px;
          background-color: pink;
          border-radius: 50%;
          overflow: hidden;
        }
        & > div {
          margin-left: 10px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          & > span:first-child {
            color: #1e1e1e;
            font-size: 16px;
            margin-bottom: 0.5vh;
          }
          & > span:last-child {
            color: #898989;
            font-size: 10px;
          }
        }
      }
    }
  }
  .add-btn {
    width: 80vw;
    margin-top: 5vh;
    margin-left: 10vw;
    margin-bottom: 10vw;
    .nut-button {
      background: #ff7e00;
    }
  }
  .custom-wrap {
    width: 90vw;
    height: 70vh;
    padding: 5vw;
    position: relative;
    .close-btn {
      position: absolute;
      top: 20px;
      right: 20px;
      display: block;
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      color: #ccc;
      i {
        font-size: 16px;
      }
    }
  }
}
.show-more-detai {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  img {
    width: 100%;
    height: auto;
  }
}
</style>
<style>
.nut-actionsheet-panel {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background-color: #ffffff;
}
</style>
